<template>
  <!-- 移除最外层背景容器 -->
  <div class="min-h-screen flex items-center justify-center p-4">
    <!-- 移除卡片容器背景和边框 -->
    <div class="rounded-xl shadow-lg p-8 w-full max-w-4xl transform transition-all duration-500 hover:scale-[1.01]">
      <!-- 左侧题目区 -->
      <div class="rounded-xl p-6 flex flex-col overflow-hidden">
        <div
          class="flex items-center justify-between mb-4 pb-4 border-b border-blue-500"
        >
          <h2 class="text-3xl font-extrabold text-blue-400 flex items-center">
            <i class="fas fa-book-open mr-3 text-blue-500"></i>
            408 题目解析
          </h2>
          <span
            class="text-lg font-semibold text-blue-400 bg-blue-900 px-4 py-2 rounded-md shadow-sm border border-blue-600"
          >
            第 {{ currentQuestion.id }} 题
          </span>
        </div>
        <div
          class="flex-1 text-lg text-gray-200 leading-relaxed overflow-y-auto pr-2 custom-scrollbar"
        >
          <p class="mb-4">
            <strong class="text-blue-400"> 题目： </strong>
            {{ currentQuestion.question }}
          </p>
          <p class="mt-6 text-gray-400 italic">
            <i class="fas fa-lightbulb mr-2 text-yellow-400"></i>
            请仔细阅读题目，选择最合适的选项。
          </p>
        </div>
      </div>
      <!-- 右侧：用户答题输入区和提交按钮 -->
      <div
        class="flex-1 bg-gray-900 bg-opacity-70 rounded-xl p-6 shadow-md flex flex-col border border-purple-600"
      >
        <div
          class="flex items-center justify-between mb-4 pb-4 border-b border-purple-500"
        >
          <h2 class="text-3xl font-extrabold text-purple-400 flex items-center">
            <i class="fas fa-keyboard mr-3 text-purple-500"></i>
            你的答案
          </h2>
          <button
            class="text-purple-400 hover:text-purple-200 transition-colors duration-300 text-lg"
            @click="resetQuiz"
          >
            <i class="fas fa-redo-alt mr-2"></i>
            重置
          </button>
        </div>
        <div class="flex-1 flex flex-col">
          <label
            class="block text-xl font-semibold text-purple-400 mb-3"
            for="answerInput"
          >
            <i class="fas fa-pencil-alt mr-2"></i>
            请选择你的答案:
          </label>
          <div class="grid grid-cols-1 gap-4 mb-4">
            <button
              v-for="(option, index) in currentQuestion.options"
              :key="index"
              class="w-full p-4 border-2 border-purple-600 rounded-lg text-left text-lg text-gray-200 bg-gray-700 hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300 shadow-sm option-button"
              :class="{ 'bg-purple-600 border-purple-400': selectedAnswer === String.fromCharCode(65 + index) }"
              @click="selectAnswer(String.fromCharCode(65 + index))"
            >
              <span class="font-bold mr-2">{{ String.fromCharCode(65 + index) }}.</span>
              {{ option }}
            </button>
          </div>
          <div
            class="mt-4 p-3 rounded-lg text-center text-lg font-medium"
            :class="{
              'bg-green-700 text-green-100': feedbackType === 'correct',
              'bg-red-700 text-red-100': feedbackType === 'incorrect',
              hidden: !feedbackMessage
            }"
          >
            {{ feedbackMessage }}
          </div>
          <button
            class="mt-6 w-full bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold py-4 px-6 rounded-lg shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300 flex items-center justify-center text-xl"
            @click="submitAnswer"
            :disabled="!selectedAnswer"
          >
            <i class="fas fa-paper-plane mr-3"></i>
            提交答案
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟题目数据
const questions = [
  {
    id: 1,
    question: "在操作系统中，以下哪种调度算法可能导致“饥饿”现象？",
    options: ["先来先服务 (FCFS)", "短作业优先 (SJF)", "时间片轮转 (RR)", "优先级调度 (Priority Scheduling)"],
    answer: "D",
    explanation: "优先级调度算法中，如果高优先级的进程不断到来，低优先级的进程可能永远得不到执行，从而导致“饥饿”现象。"
  },
  {
    id: 2,
    question: "在计算机网络中，TCP协议提供哪种服务？",
    options: ["无连接不可靠传输", "面向连接可靠传输", "无连接可靠传输", "面向连接不可靠传输"],
    answer: "B",
    explanation: "TCP（传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。"
  },
  {
    id: 3,
    question: "以下哪个不是面向对象编程的基本特征？",
    options: ["封装", "继承", "多态", "并行"],
    answer: "D",
    explanation: "面向对象编程（OOP）的三个基本特征是封装、继承和多态。并行是并发编程的概念。"
  }
];

// 当前题目索引
const currentQuestionIndex = ref(0);
// 当前题目
const currentQuestion = ref(questions[currentQuestionIndex.value]);
// 用户选择的答案
const selectedAnswer = ref(null);
// 反馈消息
const feedbackMessage = ref('');
// 反馈类型
const feedbackType = ref('');

// 加载题目
const loadQuestion = (index) => {
  if (index < questions.length) {
    currentQuestion.value = questions[index];
    selectedAnswer.value = null;
    feedbackMessage.value = '';
    feedbackType.value = '';
  } else {
    currentQuestion.value = { id: '完成', question: '' };
    feedbackMessage.value = '恭喜你，所有题目已完成！你可以点击重置按钮重新开始。';
    feedbackType.value = 'correct';
  }
};

// 选择答案
const selectAnswer = (answer) => {
  selectedAnswer.value = answer;
};

// 提交答案
const submitAnswer = () => {
  if (!selectedAnswer.value) {
    feedbackMessage.value = '请选择你的答案！';
    feedbackType.value = 'incorrect';
    return;
  }

  const correctAnswer = currentQuestion.value.answer;
  if (selectedAnswer.value === correctAnswer) {
    feedbackMessage.value = `正确！答案是 ${correctAnswer}。`;
    feedbackType.value = 'correct';
    setTimeout(() => {
      currentQuestionIndex.value++;
      loadQuestion(currentQuestionIndex.value);
    }, 1500);
  } else {
    feedbackMessage.value = `错误！正确答案是 ${correctAnswer}。`;
    feedbackType.value = 'incorrect';
  }
};

// 重置测验
const resetQuiz = () => {
  currentQuestionIndex.value = 0;
  loadQuestion(currentQuestionIndex.value);
};

// 初始加载第一题
loadQuestion(currentQuestionIndex.value);
</script>

<style scoped>
/* 移除所有背景相关样式 */
/* 保留原有滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}


.hidden {
  display: none;
}
</style>